<!DOCTYPE html>
<html>
#{include file="header.html"}#
<header>
	<link href="#{$smarty.const.APP}#/View/template/css/plugins/fullcalendar/fullcalendar.css" rel="stylesheet">
	<link href="#{$smarty.const.APP}#/View/template/css/plugins/fullcalendar/fullcalendar.print.css" rel="stylesheet">
</header>
<style>
	.layui-layer-btn {
		text-align: center;
	}
</style>

<body class="gray-bg">
	<div class="wrapper wrapper-content animated fadeInRight">
		<div class="row">

			<div class="col-md-2">
				<div class="ibox float-e-margins">
					<div class="ibox-title">
						<h5>工作日历</h5>
					</div>
					<div class="list-group">
						<a href="#" class="list-group-item active">选择日期</a>
						<a href="#" class="list-group-item">
							<input id="goDate" type="date">
						</a>
						<a href="#" class="list-group-item">已执行</a>
					</div>
				</div>
			</div>
			<div class="col-md-10">
				<div id='calendar'></div>
			</div>

		</div>
	</div>
</body>

</html>
<script src="#{$smarty.const.APP}#/View/template/js/plugins/fullcalendar/fullcalendar.min.js"></script>
<script src="#{$smarty.const.APP}#/View/template/js/plugins/fullcalendar/moment.min.js"></script>
<script>
	$(document).ready(function () {
		/* 今天时间 */

		/* 获取事件 */
		var events_data
		$.ajax({
			type: "GET",
			url: "#{$smarty.const.ACT}#/plan/Wait/calendar_data",
			dataType: "json",
			async: false,
			success: function (data) {
				events_data = data;
			}
		});
		arr = $.map(events_data, function (a) {
			a.start = new Date(a.start * 1000)//日期格式转化
			a.end = new Date(a.end * 1000)
			return a;
		});

		/* 日历设置 */
		$('#calendar').fullCalendar({
			aspectRatio: 2,//尺寸比例
			header: {
				center: 'title',
				right: 'prevYear,prev,next,nextYear',
				left: 'month,basicWeek,basicDay,today'
			},
			titleFormat: {
				month: 'yyyy年 MMM月', // September 2013
				week: "[yyyy年] MMMM dd日{ ' / ' [yyyy年] [MMMM] dd日 }", // Sep 7 - 13 2013
				day: 'dddd, MMMM dd日 , yyyy年' // Tuesday, Sep 8, 2013
			},
			selectable: true,



			select: function (startDate, endDate, allDay, jsEvent, view) {
				var startDate = startDate.getTime() / 1000;
				var endDate = endDate.getTime() / 1000;
				layer.open({
					type: 1,
					title: '添加事件',
					area: ['40%', '50%'],
					content: `
					<div style="margin:10px;height:10%">
						<label class="layui-form-label">标题:</label>
						<input id="event_title_name"  placeholder="请输入标题"></input>
					</div>
					<div style="margin:10px;height:50%">
						<label class="layui-form-label">内容:</label>
						<textarea id="event_title_con"  style="width:100%;height:100%;border-radius:4px;" placeholder="请输入内容"></textarea>
					</div>
					<div style="margin:10px;margin-top:30px;height:10%">
						<label class="layui-form-label">提示色:</label>
						<input type="color" id="color" style="width:100%"">
					</div>
					`,
					btn: ['确定', '取消']
					, yes: function (index, layero) {
						var event_title_name = $('#event_title_name').val();
						var event_title_con = $('#event_title_con').val();
						if (!event_title_name) {
							alert('标题不能为空');
							return
						}
						var color = $('#color').val();
						$.ajax({
							type: "POST",
							data: {
								'title': event_title_name,
								'content': event_title_con,
								'color': color,
								'start': startDate,
								'end': endDate,
							},
							url: "#{$smarty.const.ACT}#/plan/Wait/event_add",
							dataType: "json",
							success: function (data) {
								if (data.statusCode == '200') {
									layer.msg('操作成功', { time: 1000 }, function () {
										location.reload()
									});
								}
							}
						});
					}
				});
			},



			eventClick: function (event, jsEvent, view) {
				console.log(event)
				layer.open({
					title: event.title,
					content: event.content,
					area: ['40%','80%'],
					btn: ['编辑', '删除'],
			/*  */		yes: function () {
						layer.open({
							type: 1,
							title: '编辑事件',
							success: function (layero, index) {
								$('#event_title_name').val(event.title);
								$('#event_title_con').val(event.content);
								$('#color').val(event.color);
								$('#startDate').val(formatDate(event.start));
								$('#endDate').val(formatDate(event.end));
							},
							area: ['40%', '80%'],
							content: `
					<div style="margin:10px;height:10%">
						<label class="layui-form-label">标题:</label>
						<input id="event_title_name"  placeholder="请输入标题"></input>
					</div>
					<div style="margin:10px;height:30%">
						<label class="layui-form-label">内容:</label>
						<textarea id="event_title_con"  style="width:100%;height:100%;border-radius:4px;" placeholder="请输入内容"></textarea>
					</div>
					<div style="margin:10px;margin-top:30px;height:10%">
						<label class="layui-form-label">提示色:</label>
						<input type="color" id="color" style="width:100%"">
					</div>
					<div style="margin:10px;margin-top:30px;height:10%">
						<label class="layui-form-label">开始时间:</label>
						<input type="date" id="startDate" style="width:100%"">
					</div>
					<div style="margin:10px;margin-top:30px;height:10%">
						<label class="layui-form-label">结束时间:</label>
						<input type="date" id="endDate" style="width:100%"">
					</div>
					`,
							btn: ['确定', '取消']
							, yes: function (index, layero) {
								var event_title_name = $('#event_title_name').val();
								var event_title_con = $('#event_title_con').val();
								if (!event_title_name) {
									alert('标题不能为空');
									return
								}
								var color = $('#color').val();
								var startDate = $('#startDate').val();
								var endDate = $('#endDate').val();
								$.ajax({
									type: "POST",
									data: {
										'id': event.id,
										'title': event_title_name,
										'content': event_title_con,
										'color': color,
										'start': startDate,
										'end': endDate,
									},
									url: "#{$smarty.const.ACT}#/plan/Wait/event_update",
									dataType: "json",
									success: function (data) {
										if (data.statusCode == '200') {
											layer.msg('操作成功', { time: 1000 }, function () {
												location.reload()
											});
										}
									}
								});
							}
						});
					},
					btn2: function () {
						layer.confirm("确定删除事件?", {
						}, function () {
							$('#calendar').fullCalendar('removeEvents', event.id);
							$.ajax({
									type: "post",
									data: {
										'id': event.id,
									},
									url: "#{$smarty.const.ACT}#/plan/Wait/event_delete",
									dataType: "json",
									success: function (data) {
										if (data.statusCode == '200') {
											layer.msg('操作成功', { time: 1000 }, function () {
											});
										}
									}
								});
							layer.closeAll('dialog')
						});
					}
				})
			},
			eventDestroy: function (event, element, view) { },
			/* 事件 */
			events: arr
		})


		/* 搜索日期 */
		$('#goDate').change(function () {


			// console.log($(this).html());
			// var date =new Date(2018, 11, 24, 10, 33, 30);
			var date = $('#goDate').val();
			$('#calendar').fullCalendar('gotoDate', new Date(date));
		})
		/* 日期格式化 */
		var formatDate = function (date) {
			if (date) {
				var y = date.getFullYear();
				var m = date.getMonth() + 1;
				m = m < 10 ? '0' + m : m;
				var d = date.getDate();
				d = d < 10 ? ('0' + d) : d;
				return y + '-' + m + '-' + d;
			}

		};
		$('#goDate').val(formatDate(new Date()));


	});
</script>